<template>
  <Card title="新增文章" class="border-0 p-0" header-class="bg-white border-0">
    <form>
      <FormGroupInput label-text="标题：" placeholder="请输入标题" data-id="title" v-model="article.title" />
      <FormGroupSelect
        label-text="类目："
        data-id="category"
        :options="categories"
        v-model="article.category"
      />
      <FormGroupSwitch label-text="热门：" data-id="hot" v-model="article.hot" @change1="change" />
      <div class="form-group row">
        <button class="btn btn-primary offset-3" type="button" @click="submit">提交</button>
      </div>
    </form>
  </Card>
</template>
<script>
import Card from "@/components/Card";
import FormGroupInput from "@/components/FormGroupInput";
import FormGroupSelect from "@/components/FormGroupSelect";
import FormGroupSwitch from "@/components/FormGroupSwitch";
export default {
  name: "ArticleEdit",
  components: {
    Card,
    FormGroupInput,
    FormGroupSelect,
    FormGroupSwitch
  },
  mounted() {
    const id = this.$route.params.id;
    if (id !== undefined) {
      this.article = this.$parent.articles[id];
    }
  },
  data: function() {
    return {
      article: { title: "", category: 0, hot: false },
      categories: this.$parent.categories
    };
  },
  methods: {
    change(checked) {
      this.article.hot = checked;
    },
    submit() {
      if (this.$route.params.id === undefined) {
        this.$parent.articles.push(this.article);
      }

      this.$router.push({ path: "/article/list" });
    }
  }
};
</script>